<template>
    <div id="pages">
        <ul class="page-btn">
            <li @click="prePage()" :class="{pageactive:pre == 1}" @mouseover="pre = 1" @mouseout="pre = 0"
            v-on:click="$emit('pageNum',pIndex)">
                <img src="../../assets/pages/箭头左.png" alt="" v-if="pre == 0">
                <img src="../../assets/pages/箭头左白.png" alt="" v-if="pre == 1">
            </li>
            <div v-if="totalpage >5" style="display:inline-block;">
                <li @click="piChange(1)" class="phide" :class="{pageactive:pIndex == 1,pshowTop:pIndex>3}">
                    1
                </li>
                <li class="points phide" :class="{pshowTop:pIndex>3}">...</li>

                <div style="display:inline-block;" v-if="pIndex>3 && pIndex<totalpage-2">
                    <li v-for="(i,index) in 5" :key="i"
                    @click="piChange(pIndex-2+index)" v-on:click="$emit('pageNum',pIndex-2+index)"
                    :class="{pageactive:pIndex == pIndex-2+index}">
                        {{pIndex-2+index}}
                    </li>
                </div>
                <div style="display:inline-block;" v-else-if="pIndex<=3">
                    <li v-for="(i,index) in 5" :key="i"
                    @click="piChange(index+1)" v-on:click="$emit('pageNum',index+1)"
                    :class="{pageactive:pIndex == index+1}">
                        {{index+1}}
                    </li>
                </div>
                <!-- pIndex>=totalpages-2 -->
                <div style="display:inline-block;" v-else>
                    <li v-for="(i,index) in 5" :key="i"
                    @click="piChange(totalpage-4+index)" v-on:click="$emit('pageNum',totalpage-4+index)"
                    :class="{pageactive:pIndex == totalpage-4+index}">
                        {{totalpage-4+index}}
                    </li>
                </div>

                <li class="points show" :class="{hideTop:pIndex >= totalpage-2}">...</li>
                <li @click="piChange(totalpage)" :class="{pageactive:pIndex == totalpage,hideTop:pIndex >= totalpage-2}"
                class="show">
                    {{totalpage}}
                </li>
            </div>
            <div v-else style="display:inline-block;">
                <li v-for="(i,index) in totalpage" :key="i"
                    @click="piChange(index+1)" v-on:click="$emit('pageNum',index+1)"
                    :class="{pageactive:pIndex == index+1}">
                        {{index+1}}
                </li>
            </div>
            <li @click="nextPage()" :class="{pageactive:next == 1}" @mouseover="next = 1" @mouseout="next = 0"
            v-on:click="$emit('pageNum',pIndex)">
                <img src="../../assets/pages/箭头右.png" alt="" v-if="next == 0">
                <img src="../../assets/pages/箭头右白.png" alt="" v-if="next == 1">
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pIndex:1,
            pre:0,
            next:0,
            pageLoadingNum:5
        }
    },
    props:['totalpage'],
    methods: {
        piChange(index){
            this.pIndex = index;
            // console.log(this.pIndex)
        },
        pageIndex(){
            callback(this.pIndex)
        },
        prePage(){
            if(this.pIndex == 1){
                alert("已经到第一页了！")
            }
            else{
                this.pIndex--;
                // console.log(this.pIndex)
            }
        },
        nextPage(){
            if(this.pIndex == this.totalpage){
                alert("已经到最后一页了");
            }
            else{
                this.pIndex++;
            }
        }
    },
}
</script>
<style>
.pshowTop{
    display: inline-block !important;;
}
.phide{
    display: none;
}
.show{
    display: inline-block;
}
.hideTop{
    display: none !important;
}

#pages{
    width: 458px;
    margin:0 auto;
    margin-top: 24px;
}

.page-btn{
    width: 458px;
    height: 42px;
}

.page-btn li{
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    color: #666666;
    line-height: 32px;
    text-align: center;
    /* 解决div并排错位 */
    vertical-align:top;
    margin: 4px;
}

.page-btn li img{
    width: 12px;
}

.page-btn .points{
    border:none !important;
    background-color: #F0F3F6 !important;
    font-size: 40px !important;
    color: #DDDDDD !important;
    line-height: 10px !important;
}

.pageactive{
    color: white !important;
    background-color: #1958FB !important;
}
</style>